<div class="userinfo">
    <div class="icon"><img src="../public/all/images/phone/avatar.png" height="60px"/></div>
    <div class="userdetail">
        欢迎您！<span class="name">--</span> <br/>
        <span class="line2">
            账户余额：<span class="red"> 0.00 </span>RMB
        </span>
    </div>
    <div class="clear"></div>
</div>

<div class="tabs">
    <ul class="am-avg-sm-4">
        <li class="charge">存款</li>
        <li class="take">取款</li>
        <li class="charge_log">存款记录</li>
        <li class="take_log" style="border:0px;">取款记录</li>
    </ul>
</div>

<!-- 存款 -->
<div class="charge-c">
    <div class="disable">充值暂时关闭！</div>
    <div class="bank-charge item-charge">
        <a href="#">
            <div class="icon"><img src="../public/all/images/phone/icon-bank.png" width="35px"/></div>
            <div class="arrow"><img src="../public/all/images/phone/arrow.png" width="9px"/></div>
            <div class="title">银行转账</div>
            <div class="clue">线下入款，您的首选</div>
            <div class="clear"></div>
        </a>
    </div>

    <div class="alipay-charge item-charge">
        <a href="#">
            <div class="icon"><img src="../public/all/images/phone/icon-alipay.png" width="35px"/></div>
            <div class="arrow"><img src="../public/all/images/phone/arrow.png" width="9px"/></div>
            <div class="title">支付宝支付</div>
            <div class="clue">支付宝转账支付</div>
            <div class="clear"></div>
        </a>
    </div>

    <div class="wechat-charge item-charge">
        <a href="#">
            <div class="icon "><img src="../public/all/images/phone/icon-wechat.png" width="35px"/></div>
            <div class="arrow"><img src="../public/all/images/phone/arrow.png" width="9px"/></div>
            <div class="title">微信支付</div>
            <div class="clue">微信转账支付</div>
            <div class="clear"></div>
        </a>
    </div>
</div>

<!-- 取款 -->
<div class="take-c">
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">取款金额</td>
                <td class="input">
                    <input type="number" class="am-form-field amount" placeholder="请填写取款金额" />
                </td>
            </tr>
        </table>
    </div>
    <div class="form_clue">单笔下限<span class="red">100</span>，单笔上限<span class="red">1000000</span></div>

    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">取款密码</td>
                <td class="input">
                    <input type="password" class="am-form-field password" placeholder="请填写取款密码" />
                </td>
                <td class="see">
                    <img src="../public/all/images/phone/see.png"/>
                </td>
            </tr>
        </table>
    </div>

    <div style="margin: 15px;">
        <button type="button" class="am-btn am-btn-primary btn-take common_button">确认提交</button>
    </div>
</div>

<!-- 存款/取款记录 -->
<div class="log-c">
    <table class="mobile">
        <tr value="-1">
            <th>时间</th>
            <th>金额</th>
            <th>状态</th>
        </tr>
    </table>
</div>

<style type="text/css">
    body {
        background-color: #eeeeee;
    }
    .userinfo {
        height: 80px;
        border-top: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
        color: #000;
        font-weight: bold;
    }
    .userinfo .icon {
        float: left;
        width: 90px;
        text-align: right;
        padding-top: 10px;
    }
    .userinfo .userdetail {
        float: left;
        margin-left: 10px;
        margin-top: 15px;
    }
    .userinfo .userdetail .line2 {
        font-size: 14px;
        color: #838383;
    }

    .mobile td {
        background-color: #fff;
    }
    .common_button { margin: 0px; }
    .charge-c .disable {
        text-align: center;
        color: red;
        line-height: 50px;
        display: none;
    }
</style>

<script>
    $(".charge-c").hide();
    $(".take-c").hide();
    $(".log-c").hide();
    var n = urlInfo.params.n;
    if (n == 'take') {
        $(".take-c").show();
        $(".tabs .take").attr("class", "take active");
    }
    else if (n == 'charge_log') {
        $(".log-c").show();
        $(".tabs .charge_log").attr("class", "charge_log active");
    }
    else if (n == 'take_log') {
        $(".log-c").show();
        $(".tabs .take_log").attr("class", "take_log active");
    }
    else {
        $(".tabs .charge").attr("class", "charge active");
        $(".charge-c").show();
        fillChargeType();
    }

    // 填充充值方式
    function fillChargeType() {
        $(".bank-charge").hide();
        $(".alipay-charge").hide();
        $(".wechat-charge").hide();
        Classify.query("settings", "charge_enable", false, "1", function(v) {
            if (v == '0') {
                $(".charge-c .disable").show();
                return;
            }
            ME.query(function() {
                var grade = context.user.user.grade || 1;
                grade = grade + '';
                Classify.queryExt("money", "banks", true, [], function(r) {
                    for (var i in r) {
                        if (r[i].enable != 1) continue;
                        if (r[i].layer.indexOf(grade) == -1) continue;
                        $(".bank-charge").show();
                        break;
                    }
                });
                Classify.queryExt("money", "alipay", true, [], function(r) {
                    for (var i in r) {
                        if (r[i].enable != 1) continue;
                        if (r[i].layer.indexOf(grade) == -1) continue;
                        $(".alipay-charge").show();
                        break;
                    }
                });
                Classify.queryExt("money", "wechat", true, [], function(r) {
                    for (var i in r) {
                        if (r[i].enable != 1) continue;
                        if (r[i].layer.indexOf(grade) == -1) continue;
                        $(".wechat-charge").show();
                        break;
                    }
                });
            });
        });
    }

    // 填充我的信息
    ME.query(function() {
        fillUserInfo();
        if (n == "charge_log") {
            // 存款记录
            CMD.query_account_log2({
                owner: "",
                type: "deposit",
                pageSize: 200,
            }, function(r) {
                fillLog(r.list);
            });
        }
        else if (n == "take_log") {
            // 取款记录
            CMD.query_account_log2({
                owner: "",
                type: "withdraw",
                pageSize: 200,
            }, function(r) {
                fillLog(r.list);
            });
        }
    });
    function fillUserInfo() {
        if (context.user) {
            $(".userinfo .name").html(context.user.user.mobile || '游客');
            $(".userinfo .line2 .red").html(" " + (context.user.balance / 100).toFixed(2) + " ");
            if (context.user.user.bank && context.user.user.bank != '') {
                var v = JSON.parse(context.user.user.bank);
                $(".take-c .info").html(v.bank + " 尾号" + v.account.substring(v.account.length - 5) + " " +
                    (context.user.user.name || ''));
            }
            else if (n == 'take') {
                $("#clue .button").click(function() {
                    Util.jumpUrl({
                        cmd: 'bank'
                    });
                });
                alert2("请先绑定银行卡信息！");
            }
        }
    }
    fillUserInfo();

    // tab标签切换
    $(".tabs .charge").click(function() {
        Util.jumpUrl({
            n: "charge",
        });
    });
    $(".tabs .take").click(function() {
        Util.jumpUrl({
            n: "take",
        });
    });
    $(".tabs .charge_log").click(function() {
        Util.jumpUrl({
            n: "charge_log",
        });
    });
    $(".tabs .take_log").click(function() {
        Util.jumpUrl({
            n: "take_log",
        });
    });

    // 充值处理
    $(".bank-charge").click(function() {
        Util.jumpUrl({
            cmd: "charge_bank",
        })
    });
    $(".alipay-charge").click(function() {
        Util.jumpUrl({
            cmd: "charge_alipay",
        })
    });
    $(".wechat-charge").click(function() {
        Util.jumpUrl({
            cmd: "charge_wechat",
        })
    });

    // 取款处理
    $(".take-c .btn-take").click(function() {
        if (!context.user.user.bank || context.user.user.bank == '') return;
        var v = JSON.parse(context.user.user.bank);
        var amount = $(".take-c .amount").val();
        if (amount == '') {
            alert2("请输入取款金额！");
            return;
        }
        amount = parseInt(amount);
        if (amount < 100 || amount > 1000000) {
            alert2("取款金额不合法！");
            return;
        }

        if (context.user.dw > 0) {
            alert2("您的投注额度尚未达到要求，暂时无法取款！");
            return;
        }
        if (context.user.balance < amount * 100) {
            alert2("余额不足！");
            return;
        }

        var password = $(".take-c .password").val().trim();
        if (password == '') {
            alert2("请输入取款密码，如果未设置取款密码请先设置！");
            return;
        }

        if (password != context.user.user.password) {
            alert2("取款密码验证失败！");
            return;
        }

        var memo = {
            bank: v.bank,
            addr: v.addr,
            account: v.account,
        }
        startLoading();
        CMD.withdraw(context.user.user.id, "", amount*100, memo, function() {
            stopLoading();
            alert2("提交成功！");
            ME.query();
        }, function(message) {
            stopLoading();
            alert2("提交失败，错误原因：" + message);
            ME.query();
        });
    });

    var logList = [];
    function fillLog(list) {
        logList = list;
        var table = $(".log-c table");
        for (var i in list) {
            var d = list[i];
            var tr = $("<tr value='__i__'></tr>".replace(/__i__/, i));
            tr.append('<td>' + d.start.substring(5) + '</td>');
            tr.append('<td class="red">' + (d.amount/100).toFixed(2) + '</td>');
            if (d.state == 0) {
                if (d.type == 'deposit') tr.append('<td>充值中</td>');
                else tr.append('<td>等待审核</td>');
            }
            else if (d.state == 1) {
                if (d.type == 'deposit') tr.append('<td>充值完成</td>');
                else tr.append('<td>已打款</td>');
            }
            else {
                tr.append('<td>已取消</td>');
            }
            table.append(tr);
        }
        if (list.length == 0) {
            table.append("<tr><td colspan='3'>没有数据</td></tr>");
        }

        // 行点击后显示详情
        $(".log-c table tr").click(function(e) {
            var index = $(e.currentTarget).attr("value");
            if (index == -1) return;
            var data = logList[index];
            if (data)
                showLogDetail(data);
        });
    }

    function showLogDetail(data) {
        $("#log_content").css("max-height", ($(window).height() - 120) + "px");
        var w = w || $("body").width();
        if (w > 300) w = 300;
        if (w > $("body").width()) w = $("body").width() - 40;
        $("#log").modal({
            width: w,
        });

        var c = $("#log .log_content");
        c.empty();
        var t = '<div class="item"><div class="c1">__title__：</div><div class="c2">__v__</div><div class="clear"></div></div>';

        var line = t.replace(/__title__/, "发起时间");
        line = line.replace(/__v__/, data.start);
        c.append(line);

        var line = t.replace(/__title__/, "交易类型");
        line = line.replace(/__v__/, Util.convertLogType(data.type));
        c.append(line);

        var line = t.replace(/__title__/, "交易金额");
        line = line.replace(/__v__/, (data.amount / 100).toFixed(2));
        c.append(line);

        var line = t.replace(/__title__/, "交易状态");
        if (data.state == 0) {
            if (data.type == 'deposit') line = line.replace(/__v__/, "充值中")
            else line = line.replace(/__v__/, "等待审核");
        }
        else if (data.state == 1) {
            if (data.type == 'deposit') line = line.replace(/__v__/, "充值完成");
            else line = line.replace(/__v__/, "已打款");
        }
        else {
            line = line.replace(/__v__/, "已取消");
        }
        c.append(line);

        if (data.type == 'deposit') {
            var line = t.replace(/__title__/, "充值方式");
            line = line.replace(/__v__/, Util.convertChannel(data.channel));
            c.append(line);
        }

        var line = t.replace(/__title__/, "摘要");
        line = line.replace(/__v__/, data.memo || '无');
        c.append(line);
    }
</script>